<template>
	<view class="layout">
		<!-- 进度条 -->
		<view class="aides">
			<view class="text-center">
				<image src="../../../static/image/dotblur.png" mode=""></image>
			</view>

			<view class="lineOne"></view>

			<view class="grade">
				<image src="../../../static/image/dotblur.png" mode=""></image>
			</view>

			<view class="lineTwo"></view>

			<view class="Pending">
				<image src="../../../static/image/dotgrey.png" mode=""></image>
			</view>
		</view>
		<!-- 认证文字 -->
		<view class="title">
			<view class="author">
				<text>主体认证</text>
			</view>
			<view class="author">
				<text>选择等级</text>
			</view>
			<view class="PendingAuthor">
				<text>开始赚钱</text>
			</view>
		</view>
		<!-- 公告轮播 -->
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#ec3d27"></uni-icons>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="2000" duration="300" circular>
					<swiper-item>
						<navigator url="/pages/Home/Home">
							如开店有疑问可联系我们客服电话400-700-2100
						</navigator>
					</swiper-item>
					<swiper-item>
						<navigator url="/pages/Home/Home">
							如开店有疑问可联系我们客服电话400-700-2100
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#ec3d27"></uni-icons>
			</view>
		</view>
		<!-- 会员等级选择 -->
		<view class="container">
			<!-- 免费会员 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u444.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">企业普通版</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								0
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">赠送权益：</text>
						<text class="Content">5次岗位发布、10次岗位剧新、50推广币</text>
					</view>
				</view>
			</view>
			<!-- 企业会员1 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u449.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP1会员
							</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								988
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">赠送权益：</text>
						<text class="Content">包含企业普通版权益，额外赠送300推广币、10次岗位发布、50次岗位刷新、主页文字滚动广告位*2周、主页信息流广告位*2周、专场招聘轮播*2周</text>
					</view>
				</view>
			</view>
			<!-- 企业会员2 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u453.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP2会员
								</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								1598
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">赠送权益：</text>
						<text class="Content">包含企业普通版功能，额外赠送500推广币、20次岗位发布、120次岗位刷新、主页侧栏广告位*2周、专场招聘轮播*4周</text>
					</view>
				</view>
			</view>
			<!-- 企业会员3 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u458.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP3会员
								</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								2998
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">赠送权益：</text>
						<text class="Content">包含企业普通版功能，额外赠送800推广币、30次职位发布、300次岗位刷新、主页信息流广告位*4周、主页轮播广告位*1周、专场招聘轮播广告位*6周</text>
					</view>
				</view>
			</view>
			<!-- 企业会员4 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u477.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP4会员</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								5998
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">赠送权益：</text>
						<text class="Content">包含企业普通版权益，额外赠送1200推广币、40次职位发布、500次岗位刷新、主页信息流广告位*8周、主页轮播广告位*2周、岗位置顶/个*2周</text>
					</view>
				</view>
			</view>
			<!-- 企业会员5 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u482.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP5会员</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								9998
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">会员权益：</text>
						<text class="Content">赠送1500推广币、发布岗位数/次享受7折、岗位刷新点/次享受7折、广告位/周享受7折、置顶岗位/周享受7折等等</text>
					</view>
				</view>
			</view>
			<!-- 企业会员6 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u498.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP6会员</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								19998
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">会员权益：</text>
						<text class="Content">发布岗位数/次享受6.5折、岗位刷新点/次享受6.5折、广告位/周享受6.5折、置顶岗位/周享受6.5折等等</text>
					</view>
				</view>
			</view>
			<!-- 企业会员7 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u509.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP7会员</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								39998
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">会员权益：</text>
						<text class="Content">发布岗位数/次享受6折、岗位刷新点/次享受6折、广告位/周享受6折、置顶岗位/周享受6折等等</text>
					</view>
				</view>
			</view>
			<!-- 企业会员8 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u520.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP8会员</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								60000
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">会员权益：</text>
						<text class="Content">发布岗位数/次享受5.5折、岗位刷新点/次享受5.5折、广告位/周享受5.5折、置顶岗位/周享受5.5折等</text>
					</view>
				</view>
			</view>
			<!-- 企业会员9 -->
			<view class="item">
				<label class="boxOne">
					<checkbox value="cb" style="transform:scale(0.6);" />
				</label>
				<view class="box" >
					<view class="pic">
						<image lazy-load src="../../../static/image/u531.png" mode="widthFix"></image>
						<view class="PicBao">
							<text class="Tier">
								<image class="crown" src="../../../static/image/u463.png" mode="" ></image>
								企业VIP9会员</text>
							<text class="Price">
								<image src="../../../static/image/Daoler.png" mode=""></image>
								120000
								</text>
						</view>
					</view>
					<view class="text">
						<text class="Title">会员权益：</text>
						<text class="Content">发布岗位数/次享受5折、岗位刷新点/次享受5折、广告位/周享受5折、置顶岗位/周享受5折等等</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 下一步 -->
		<view class="Button">
			<button form-type="submit" type="primary" disabled="">下一步</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	const imageStyles = reactive({
		width: 200,
		height: 200,
		border: false
	})
</script>

<style lang="scss" scoped>
	.layout {
		padding: 10rpx 30rpx;

		.aides {
			padding: 0 140rpx;
			display: flex;
			align-items: center;

			.lineOne,.lineTwo{
				height: 3px;
				background-color: #ccc;
				flex: 1;
			}
			.lineOne{
				background-color: #1296db;
			}
			.text-center {

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.Pending,.grade{
				padding: 50rpx 0;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.title {
			margin-top: -20rpx;
			padding: 0 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.author {
				color: #1296db;
			}
		}

		.notice {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			background-color: rgba(236, 93, 39, 0.1);
			margin: 30rpx auto;
			border-radius: 60rpx;
			display: flex;

			.left {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				width: 80rpx;
			}

			.center {
				flex: 1;

				swiper {
					height: 100%;

					&-item {
						height: 100%;
						font-size: 20rpx;
						color: #f26d4a;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.right {
				width: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.container{
			.item{
				padding: 20rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				.boxOne{
					padding-right: 20rpx;
				}
				.box{
					width: 70vw;
					margin-bottom: 60rpx;
					box-shadow: 0 10rpx 40rpx rgba(0, 0, 0,0.1);
					border-radius: 10rpx;
					.pic{
						position: relative;
						image{
							width: 100%;
							position: relative;
						}
						.PicBao{
							position: absolute;  
							top: 50%; 
							left: 50%; 
							transform: translate(-50%, -50%); 
							color: #fff; 
							width: 100%; 
							text-align: center; 
							font-size: 40rpx;
							font-weight: bold;
							display: flex;
							flex-direction: column;
							.Tier{
								position: relative;
								.crown{
									position: relative;
									top: 10rpx;
									left: 10rpx;
									width: 50rpx;
									height: 50rpx;
								}
							}
							image{
								width:20rpx;
								height: 20rpx;
							}
						}
					}
					.text{
						height: 100rpx;
						
						padding: 25rpx;
						color: #333;
						.Title{
							font-size: 27rpx;
							color: #F2B31D;
						}
						.Content{
							font-size: 20rpx;
							color: #888;
						}
					}
				}
			}
		}
		
		.Button {
		margin-top: 20rpx;
	}

	}
</style>